<template>
    <div>

        <template v-for="(value1, key, index) in condtionsp">
            <input v-model="value1.value" :placeholder="key + ' ' + value1.relationOperator" on-enter="search"
                   on-change="search"
                   @keyup.enter="search"
                   style="width: 300px" class="ivu-input" :title="key + ' ' + value1.relationOperator"/>
            <br v-if="(index + 1) % 3 == 0 "/>
        </template>

        <Button @click="search">search</Button>
        <br/>
        <br/>
    </div>
</template>

<script>

    const _ = require('lodash');


    let config = {
        /**
         * {name,relationOperator}
         */
        props: ['condtions'],
        data()
        {

            let dataT = {condtionsp: this.condtions};

            _.forEach(dataT.condtionsp, (ele)=>
            {
                ele.value = null;
            if (_.isEmpty(ele.relationOperator)) {
                ele.relationOperator = 'like';
            }
        }
        )
            ;

            return dataT;
        }
        ,
        methods: {

            search()
            {
                let contidonStrs = [];

                let me = this;

                _.forEach(this.condtionsp, function (v, k) {

                    var value = v.value;

                    if (value != null && value != '') {

                        if (v.relationOperator == 'like') {
                            value = `%${value}%`;
                        }
                        contidonStrs.push(`(${k} ${v.relationOperator} '${value}')`);
                    }

                });

                let condtionStr = contidonStrs.join(" and ");

                console.log(condtionStr);

                this.$emit('search', condtionStr);

            }

        }

    }

    export default config;
</script>